<template>
  <li class="todo-list" @mouseleave="flag = false" @mouseover="flag = true">
    <label>
      <input type="checkbox" :checked="isChecked" @change="changeChecked" />
      <span> {{ title }} </span>
    </label>
    <button class="btn btn-danger" v-show="flag" @click="removeListById">删除</button>
  </li>
</template>

<script>
export default {
  name: "TodoItem",
  props: {
    id: String,
    title: String,
    isChecked: Boolean,
  },
  data() {
    {
      return {
        flag: false,
      };
    }
  },
  methods: {
    changeChecked() {
      this.$bus.$emit("changeChecked", this.id);
    },
    removeListById() {
      this.$bus.$emit("removeListById", this.id);
    },
  },
  mounted() {},
};
</script>

<style>
</style>